import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Icon } from "element-ui";

import "./tailwindcss/index.css"
// import loadingMixin from "./mixins/loadingMixin";
import "./waves.css"
Vue.use(Icon)
Vue.config.productionTip = false
// Vue.mixin(loadingMixin)
Vue.directive('waves',{
  bind(el,binding){
    console.log(binding)
    el.addEventListener('click',(e)=>{
      console.log(e)
      el.style.position = 'relative'
      el.style.overflow = 'hidden'
      let boNode = el.getElementsByClassName('waves')[0]
      let {width,height,top,left,right,bottom,x,y} = el.getBoundingClientRect()
      if (boNode){
        boNode.className = 'waves'
      }else {
        boNode = document.createElement('div')
        boNode.style.width = boNode.style.height = Math.max(width,height) +'px'
        boNode.className = 'waves'
        el.appendChild(boNode)
      }
      boNode.style.background = binding.value
      let eltop = (e.pageY - top)- (Math.max(width,height)/2) + 'px'
      let elleft = (e.pageX - left) - (Math.max(width,height)/2)+ 'px'
      boNode.style.top = eltop
      boNode.style.left = elleft
      setTimeout(()=>{
        boNode.className = 'waves active'
      },0)
    })
  }
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
